<template>
  <!-- 添加或修改用户配置对话框 -->
  <el-dialog
    :title="title"
    :visible.sync="open"
    append-to-body
    width="70%"
    @close="handleClose"
  >
    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
      <div class="form-block">
        <div class="form-block-title">基本信息</div>

        <el-row>
          <el-col :span="8">
            <el-form-item label="塘口名称" prop="name">
              <el-input
                v-model.trim="form.name"
                placeholder="请输入塘口名称"
                class="input-width"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="塘口面积" prop="area">
              <el-input
                v-model.number="form.area"
                placeholder="请输入塘口面积"
                class="input-width"
              >
                <template slot="append">亩</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="塘口类型" prop="type">
              <el-select
                v-model="form.type"
                placeholder="选择塘口类型"
                class="input-width"
              >
                <el-option
                  v-for="dict in dict.type.biz_culture_pond_type"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="所属基地" prop="productionBaseId">
              <el-select
                v-model="form.productionBaseId"
                placeholder="选择所属基地"
                class="input-width"
              >
                <el-option
                  v-for="item in baseList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="备注">
              <el-input
                v-model="form.remarks"
                type="textarea"
                placeholder="请输入备注信息"
                class="input-width"
                :autosize="{ minRows: 1, maxRows: 6 }"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-form-item label="塘口照片">
            <ImageUpload v-model="form.fileUrls"></ImageUpload>
          </el-form-item>
        </el-row>
      </div>

      <el-row class="form-block">
        <el-col :span="24">
          <div class="form-block-title">关联设备</div>
        </el-col>
        <el-col :span="24">
          <ul class="relevance-card">
            <li class="first" @click="handleOpenEquipment('add')" @mouseover="equipmentHover=true" @mouseout="equipmentHover=false" :class="{'hover-scale':equipmentHover}">
              <i class="el-icon-plus"></i>
            </li>
            <li v-for="(item, index) in form.deviceList" :key="item.id">
              <div class="relevance-card-content">
                <div>
                  <ImagePreview
                    :src="item.fileUrls || placeholderImg"
                    :width="70"
                    :height="70"
                  ></ImagePreview>
                </div>
                <div class="pl-10">
                  <p class="title_18px">{{ item.name }}</p>
                  <p><span class="title_gray">编号：</span>{{ item.code }}</p>
                  <p>
                    <span class="title_gray">绑定区域：</span
                    >{{
                      item.culturePondName || item.productionBaseName || "-"
                    }}
                  </p>
                </div>
              </div>
              <div class="relevance-card-footer">
                <div>
                  <span class="title_gray">投运日期：</span
                  >{{ item.useDate || "-" }}
                </div>
                <div>
                  <el-button
                    type="text"
                    icon="el-icon-edit"
                    @click="handleOpenEquipment('edit', item.id)"
                  ></el-button>
                  <el-button
                    type="text"
                    icon="el-icon-delete"
                    class="btn-danger"
                    @click="handleRemoveEquipment(index)"
                  ></el-button>
                </div>
              </div>
            </li>
          </ul>
        </el-col>
      </el-row>

      <el-row class="form-block">
        <el-col :span="24">
          <div class="form-block-title">关联人员</div>
        </el-col>
        <el-col :span="24">
          <ul class="relevance-card">
            <li class="first" @click="handleOpenPersonnel('add')" @mouseover="personnelHover=true" @mouseout="personnelHover=false" :class="{'hover-scale':personnelHover}">
              <i class="el-icon-plus"></i>
            </li>
            <li v-for="(item, index) in form.userList" :key="item.id">
              <div class="relevance-card-content">
                <div>
                  <ImagePreview
                    :src="item.avatar || placeholderImg"
                    :width="70"
                    :height="70"
                  ></ImagePreview>
                </div>
                <div class="pl-10">
                  <p class="title_18px">{{ item.username }}</p>
                  <p>
                    <span class="title_gray">角色：</span>{{ item.roleNames }}
                  </p>
                  <p>
                    <span class="title_gray">管理区域：</span
                    >{{ item.culturePondNames || item.productionBaseNames }}
                  </p>
                </div>
              </div>
              <div class="relevance-card-footer">
                <div>
                  <span class="title_gray">手机号：</span
                  >{{ item.phonenumber || "-" }}
                </div>
                <div>
                  <el-button
                    type="text"
                    icon="el-icon-edit"
                    @click="handleOpenPersonnel('edit', item.userId)"
                  ></el-button>
                  <el-button
                    type="text"
                    icon="el-icon-delete"
                    class="btn-danger"
                    @click="handleRemovePersonnel(index)"
                  ></el-button>
                </div>
              </div>
            </li>
          </ul>


        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="handleSubmit">确 定</el-button>
      <el-button @click="handleClose">取 消</el-button>
    </div>
    <EquipmentEdit
      :visible.sync="equipmentOpen"
      :params="equipmentParams"
      @success="getDetail"
    ></EquipmentEdit>
    <PersonnelEdit
      :visible.sync="personnelOpen"
      :params="personnelParams"
      @success="getDetail"
    ></PersonnelEdit>
  </el-dialog>
</template>

<script>
import { detail, update, add } from "@/api/production/pond";
import { list as baseList } from "@/api/production/base";
import ImageUpload from "@/components/ImageUpload";
import ImagePreview from "@/components/ImagePreview";
import EquipmentEdit from "@/views/production/equipment/edit.vue";
import PersonnelEdit from "@/views/production/personnel/edit.vue";
export default {
  name: "production-pond_add",
  dicts: ["biz_culture_pond_type"],
  components: { ImageUpload, ImagePreview, EquipmentEdit, PersonnelEdit },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    params: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      equipmentHover:false,
      personnelHover:false,
      placeholderImg: require("@/assets/images/production.png"),
      equipmentOpen: false,
      equipmentParams: { type: "add", title: "关联设备", baseId: 0 },
      personnelOpen: false,
      personnelParams: { type: "add", title: "关联人员", baseId: 0 },
      baseList: [], // 基地列表
      queryParams: { id: undefined },
      title: "",
      // 是否显示弹出层
      open: false,
      // 表单
      form: {},
      // 表单校验
      rules: {
        name: [
          { required: true, message: "塘口名称不能为空", trigger: "blur" },
        ],
        area: [
          { required: true, message: "塘口面积不能为空", trigger: "blur" },
        ],
        productionBaseId: [
          { required: true, message: "所属基地不能为空", trigger: "change" },
        ],
        type: [
          { required: true, message: "塘口类型不能为空", trigger: "change" },
        ],
      },
    };
  },
  watch: {
    visible: {
      handler(val) {
        this.open = val;
        if (val && this.params.type == "edit") {
          this.queryParams.id = this.params.id;
          this.getDetail();
        }
        if (val) {
          this.getBaseList();
          this.title = this.params.title;

          if (this.params.baseId)
            this.form.productionBaseId = this.params.baseId;
        }
      },
    },
  },
  methods: {
   
    // 移除人员
    handleRemovePersonnel(index) {
      this.form.userList.splice(index, 1);
    },
    /** 关联人员 */
    handleOpenPersonnel(type = "add", id) {
      if (type === "add") {
        this.personnelParams = {
          type: "add",
          title: "关联人员",
          pondId: this.form.id,
          fromPond: true,
        };
      } else if (type === "edit") {
        this.personnelParams = {
          type: "edit",
          title: "修改人员信息",
          id,
          autoClose: true,
        };
      }
      this.personnelOpen = true;
    },
    // 移除设备
    handleRemoveEquipment(index) {
      this.form.deviceList.splice(index, 1);
    },
    /** 关联设备 */
    handleOpenEquipment(type = "add", id) {
      if (type === "add") {
        this.equipmentParams = {
          type: "add",
          title: "关联设备",
          baseId: this.form.productionBaseId,
          pondId: this.form.id,
        };
      } else if (type === "edit") {
        this.equipmentParams = {
          type: "edit",
          title: "修改设备信息",
          id,
          autoClose: true,
        };
      }
      this.equipmentOpen = true;
    },
    /** 获取基地数据 */
    getBaseList() {
      baseList({ pageSize: 100 }).then((res) => {
        this.baseList = res.rows;
      });
    },
    getDetail() {
      detail(this.queryParams).then((res) => {
        this.form = res.data;
      });
    },
    /** 提交按钮 */
    handleSubmit() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.form.id) {
            update(this.form).then((response) => {
              this.$modal.msgSuccess("修改成功");
              this.$emit("success");
              if (this.params.autoClose) this.handleClose();
            });
          } else {
            add(this.form).then((response) => {
              this.$modal.msgSuccess("新增成功");
              this.$emit("success");
              this.handleClose();
            });
          }
        }
      });
    },
    // 取消按钮
    handleClose() {
      this.$emit("update:visible", false);
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {};
      this.resetForm("form");
    },
  },
};
</script>

<style scoped lang="scss">
</style>